<script setup lang="ts">
import { dataAdd, dataUpdate } from '@/api/system/dict';
import { useForm } from '@/hooks/useForm';
import { watch, ref, computed, onMounted, reactive, toRefs } from 'vue';
import { notify } from '@/utils/element';

//定义自定义事件
const emit = defineEmits(['refresh']);

const initData = {status: '0'};

const state = reactive({
    title: '新增',      //新增 || 编辑
    type: 'add' as FormType,
    visible: false,
    loading: false,
    formData: {
        status: '0',
    } as SysDictDataType,
})

const { title, type , visible , loading , formData } = {...toRefs(state)};

defineExpose({
    open,
});

function open(type: FormType, title: string, data= {} as any) {
    state.type = type;
    state.title = title;
    //合并初始数据，深度拷贝，不然会影响原数据
    state.formData = JSON.parse(JSON.stringify({ ...initData, ...data }));
    state.visible = true;
}

onMounted(() => {
});

const disabled = computed(() => type.value ==='edit');

const roleOptions = ref([]);

const formRef = ref();
function submitForm() {
    formRef.value?.validate((valid: boolean) => {
        if(!valid) return;
        //校验通过
       //调用接口，提交数据
        submitData();

    });
}

function close() {
    if(state.loading) return;
    formRef.value?.resetFields();
    state.visible = false;
}

async function submitData() {
    try {
        state.loading = true;
        let res: any = {};
        if(state.type === 'edit') {
            res = await dataUpdate(state.formData);
        }else {
            res = await dataAdd(state.formData);
        }
        state.loading = false;
        if(res.code !== 200) return;
        notify('操作成功！', {type: 'success'});
        //关闭窗口
        close();
        //触发父组件重新加载数据
        emit('refresh');
    } catch (error) {
    } finally {
        state.loading = false;
    }
}
</script>

<template>
  <el-dialog :title="`${title}字典数据`" v-model="visible"
    center draggable :before-close="close" width="700px"
    :close-on-click-modal="false" destroy-on-close>
        <el-form v-loading="loading" ref="formRef" :model="formData" label-width="85px" label-position="right" status-icon label-suffix=":">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="字典类型" prop="dictType"  :rules="{required: true,message:'请输入字典类型',trigger:'blur'}">
                        <el-input v-model.trim="formData.dictType" disabled placeholder="请输入字典类型" maxlength="30" show-word-limit clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="数据标签" prop="dictLabel"  :rules="{required: true,message:'请输入数据标签',trigger:'blur'}">
                        <el-input v-model.trim="formData.dictLabel" placeholder="请输入数据标签" maxlength="30" show-word-limit clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="数据键值" prop="dictValue"  :rules="{required: true,message:'请输入数据键值',trigger:'blur'}">
                        <el-input v-model.trim="formData.dictValue" placeholder="请输入数据键值" maxlength="30" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="岗位状态" prop="status">
                        <el-radio-group v-model="formData.status">
                            <el-radio value="0" border>正常</el-radio>
                            <el-radio value="1" border>停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                    <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" maxlength="100" show-word-limit></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row justify="center" class="mt10">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
        </el-row>
    </el-dialog>
</template>

<style scoped>

</style>
